<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .sky {
            width: 100vw;
            height: 100vh;
            background-image: url("./img/yejing.jpg");
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 110% 110%;
            transform-origin: 50% 50%;
            overflow: hidden;
            position: relative;
        }
        .firework {
            width: 5px;
            height: 5px;
            position: absolute;
            bottom: 5px;
            left: 50%;
            opacity: 0;
            border-radius: 999px;
        }
        .firecracker {
            width: 5px;
            height: 5px;
            position: absolute;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="sky">
    </div>
    <script src="./js/anime.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        let clientWidth = document.body.clientWidth
        let clientHeight = document.body.clientHeight
        $(() => {
            for (let i = 0; i < 50; i++) {
                let $targets = $("<div class='firework'></div>");
                $(".sky").append($targets);
                Firework($targets);
            }
        });
        let Firework = ($targets) => {
            let left = Math.ceil(100 * Math.random()) + '%';
            let bottom = Math.ceil(150 * Math.random()) + clientHeight / 2;
            let color = 'linear-gradient(rgb(' + Math.ceil(Math.random() * 255) + ', ' + Math.ceil(Math.random() * 255) + ', 255), rgba(0, 0, 255, 0))';
            let delay = 1000 * Math.ceil(5 * Math.random());
            $targets.css({
                "background": color,
                "left": left,
            });
            let tl = anime.timeline({
                targets: $targets[0],
                delay: delay,
                opacity: 1,
                duration: 500
            });
            tl.add({
                targets: $targets[0],
                bottom: bottom,
                height: [5, 100, 0],
                duration: 2000,
                delay: delay,
                easing: 'linear',
                complete: () => {
                    let $html = $(renderFireworkPoint());
                    $(".sky").append($html);
                    $html.closest(".firecracker").css({ left, bottom, background: color });
                    animeFireworkPoint($html, 60);
                    $targets.remove();
                }
            });
        }
        let renderFireworkPoint = () => {
            let html = '';
            for (let i = 0; i < 20; i++) {
                html += `<div class="firecracker point${i}"></div>`
            }
            return html;
        }
        let animeFireworkPoint = ($targets, r) => {
            // 第1象限
            for (let i = 0; i < 5; i++) {
                let targets = $targets.closest('.point' + i);
                let deg = Math.PI / 2 / 5 * i;
                animeFireworkPointFunc(targets, deg, r);
            }
            // 第2象限
            for (let i = 0; i < 5; i++) {
                let targets = $targets.closest('.point' + (i + 5));
                let deg = Math.PI / 2 / 5 * i + Math.PI / 2;
                animeFireworkPointFunc(targets, deg, r);
            }
            // 第3象限
            for (let i = 0; i < 5; i++) {
                let targets = $targets.closest('.point' + (i + 10));
                let deg = Math.PI / 2 / 5 * i + Math.PI;
                animeFireworkPointFunc(targets, deg, r);
            }
            // 第4象限
            for (let i = 0; i < 5; i++) {
                let targets = $targets.closest('.point' + (i + 15));
                let deg = Math.PI / 2 / 5 * i + Math.PI / 2 + Math.PI;
                animeFireworkPointFunc(targets, deg, r);
            }
        }
        let animeFireworkPointFunc = function ($targets, deg, r) {
            let translateX = r * Math.cos(deg);
            let translateY = -1 * r * Math.sin(deg);
            anime({
                targets: $targets[0],
                translateX: { value: translateX },
                translateY: { value: translateY },
                direction: 'normal',
                duration: 1000, // 持续时间
                autoplay: true, //自动播放
                easing: 'easeOutBack', //时间曲线
                complete: () => {
                    anime.remove($targets);
                    $targets.remove();
                }
            });
        }
    </script>
</body>
</html>